<!--
 * @Author: your name
 * @Date: 2022-04-14 18:33:41
 * @LastEditTime: 2022-04-27 02:41:23
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue-admin-template\src\views\website\websiteDetails.vue
-->
<template>
  <div>
    <div style="text-align:left;padding: 1em 2em;">
      <el-button type="text"
                 size="small"
                 @click="$router.back()">返回</el-button>
    </div>
    <div class='website'>
      <div>
        <div class="header">
          <!-- 顶部 -->
          <div class="header_top">
            <div class="wrapper">
              <!-- logo -->
              <div class="left">
                <img src="../website/photo/logo1.png"
                     alt="">
              </div>
              <div class="right">
                <img src="../website/photo/txt.png"
                     alt="">
              </div>
            </div>
          </div>
          <!-- 底部 -->
          <div class="header_bottom">
            <div class="wrapper">
              <!-- 菜单栏 -->
              <ul class="menu">
                <li v-for="c in categories"
                    :key="c.id"
                    @click="toList(c)">
                  {{c.name}}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div v-if="path === '/home'"
             class="home">
          <!-- 体部 -->
          <div class="content">
            <div class="wrapper">
              <!-- 轮播图 -->
              <div class="swiper">
                <!-- 跑马灯 插件 -->
                <el-carousel height="360px">
                  <!-- 循环遍历swipers数组 显示对应的数据 -->
                  <el-carousel-item v-for="item in swipers"
                                    :key="item.id">
                    <img :src="item.url"
                         alt=""
                         height="360px">
                  </el-carousel-item>
                </el-carousel>
              </div>
              <!-- 板块 -->
              <div class="plates">
                <div class="plate"
                     v-for="item in plateData"
                     :key="item.id">
                  <div class="header"
                       @click="toList(item)">
                    <div class="title">{{item.name}}</div>
                    <div class="more"
                         @click="toList(item)">更多&gt;&gt;</div>
                  </div>
                  <ul class="list"
                      v-if="item.id == list.id">
                    <li @click="toArticle(artItem)"
                        v-for="artItem in item.articles"
                        :key="artItem.id">
                      {{artItem.title}}
                    </li>
                    <!-- 跑马灯 插件 -->
                    <el-carousel height="240px"
                                 style="width: 50%;
                                  float: left;
                                  margin-left: 45%;
                                  margin-top: -5%;">
                      <el-carousel-item v-for="Item in item.articles"
                                        :key="Item.id">
                        <img :src="Item.cover"
                             alt=""
                             height="240px"
                             width="420px"
                             @click="toArticle(Item)">

                      </el-carousel-item>
                    </el-carousel>
                  </ul>
                  <ul class="list"
                      v-else-if="item.id !== 0">
                    <li @click="toArticle(artItem)"
                        v-for="artItem in item.articles"
                        :key="artItem.id">
                      {{artItem.title}}
                    </li>
                  </ul>
                  <ul class="list"
                      v-else>
                    <li>暂无数据</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="path === '/list'"
             class="list">
          <!-- 体部 -->
          <div class="content">
            <div class="wrapper">
              <!-- 标题 -->
              <div class="header">
                <div class="title">{{ categoryData.name }}</div>
              </div>
              <!-- 文章列表区域 -->
              <div class="artListArea"
                   v-if="artData.length > 0">
                <!-- 文章列表 -->
                <div class="artList"
                     @click="toArticle(artItem)"
                     v-for="artItem in artData"
                     :key="artItem.id">
                  <!-- logo -->
                  <div class="logo">
                    <img :src="artItem.cover"
                         alt="" />
                  </div>
                  <!-- 文章详细信息 -->
                  <div class="detailMsg">
                    <!-- 文章的标题 -->
                    <div class="artTitle">标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题：{{artItem.title}}</div>
                    <!-- 发布时间 -->
                    <div class="pubTime">
                      发布时间：{{artItem.createdAt | fmtDate}}
                    </div>
                    <!-- 阅读次数 -->
                    <div class="readTime">
                      阅读次数：{{artItem.readTimes}}</div>
                    <div class="readTime">
                      点赞次数：{{artItem.thumpUp}}</div>
                  </div>
                </div>
              </div>
              <div class="noData"
                   v-else>
                暂无数据
              </div>
            </div>
          </div>
        </div>
        <div v-if="path==='/article'"
             class="article">
          <!-- 体部 -->
          <div class="content">
            <div class="articleWrapper">
              <div class="articleAitle">{{articleItem.title}}</div>
              <div class="articleDetailMsg">
                <span>发布时间：{{articleItem.createdAt | fmtDate}}</span>
                <span>阅读次数：{{articleItem.readTimes}} 次</span>
                <span>点赞次数：{{articleItem.thumpUp}} 次</span>
                <span>作者：{{articleItem.userInfo.realname}}</span>
              </div>
              <div class="artContent"
                   v-html="articleItem.content"></div>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="wrapper">
            <div class="footer_top">
              <div class="donghuan">
                <div class="dd">东环校区</div>
                <p>地址：广西柳州市城中区东环大道268号</p>
                <p>邮编：545006</p>
              </div>
              <div class="liushi">
                <div class="dd">柳石校区</div>
                <p>地址：广西柳州市鱼峰区柳石路257号</p>
                <p>邮编：545005</p>
              </div>
              <div class="liudong">
                <div class="dd">柳东校区</div>
                <p>地址：广西柳州市鱼峰区官塘大道19号</p>
                <p>邮编：545616</p>
              </div>
              <div class="qita">
                <div><span>电话：0772-2685979（校办） 0772-2687698（传真）</span></div>
                <p>本专科招生：0772—2686186 研究生招生：0772—2685375</p>
                <p>继续教育招生：0772—2686688</p>
              </div>
            </div>
            <div class="footer-bottom">
              备案号：
              <img src="../website/photo/footer01.png"
                   alt="">
              桂ICP备17000546号-1
              <img src="../website/photo/footer02.png"
                   alt="">
              前置审核编号： 桂JS200601-10
              <span>信息管理： 广西科技大学党委宣传部</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { findWebsiteById } from '@/api/website'
export default {
  data() {
    return {
      artData: [],
      id: NaN,
      list: {},
      plateData: [],
      row: {},
      path: '/home',
      // 轮播图的数据
      swipers: [],
      artCover: {},
      categories: [],
      categoryData: {},
      articleItem: {},
      navBars: []
    };
  },
  created() {
    this.id = this.$route.query.id
    this.getWebsiteById()
  },
  methods: {
    async getWebsiteById() {
      const res = await findWebsiteById({ id: this.id })
      this.row = res.data
      this.swipers = res.data.carousels
      this.categories = res.data.categories
      this.categories.forEach(element => {
        if (element.articles.length) {
          this.plateData.push(element)
        }
      });
      this.list = this.plateData[0]
    },
    toList(category) {
      this.path = '/list'
      this.categoryData = category
      category.articles.forEach(element => {
        if (element.status !== '未审核') {
          this.artData.push(element)
        }
      })
    },
    toArticle(article) {
      this.path = '/article'
      this.articleItem = article
    }
  }
};
</script>

<style lang="scss" scoped>
.website {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  a {
    text-decoration: none;
    color: #666;
  }

  .wrapper {
    width: 90%;
    margin: 0 auto;
  }
  margin: 0;
  background-image: linear-gradient(to top, #a3bded 0%, #6991c7 100%);
  .header {
    border-bottom: 1px solid #426ab3;
    .header_top {
      .wrapper {
        // border-bottom: 1px solid white;
        .left {
          float: left;
          margin-top: 1em;
        }
        .right {
          float: right;
          margin-top: 2em;
        }
        .left,
        .right {
          font-size: 16px;
          line-height: 3em;
        }
      }
      .wrapper::after {
        display: block;
        content: "";
        clear: both;
      }
    }
    .header_bottom {
      color: white;
      .wrapper {
        display: flex;
        // justify-content: space-evenly;
        .menu {
          li {
            float: left;
            line-height: 60px;
            padding: 0 1em;
            font-size: 20px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .home .content {
    font-size: 12px;
    .wrapper {
      // 轮播图样式
      .swiper {
        margin-top: 0.5em;
        img {
          width: 100%;
        }
      }
      // 板块区域
      .plates {
        // background-color: white;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        padding: 10px;
        // 每一个板块的样式
        .plate {
          background-color: #ecf6f2;
          border: 1px solid rgb(222, 219, 219);
          width: 30%;
          margin: 10px;
          padding: 10px;
          height: 340px;
          box-sizing: border-box;
          border-radius: 5px;
          // 板块头部样式
          .header {
            display: flex;
            justify-content: space-between;
            .title {
              color: #31499a;
              font-size: 18px;
              font-weight: bold;
              cursor: pointer;
            }
            .more {
              color: #999;
              margin-top: 3px;
              cursor: pointer;
            }
          }
          // 板块列表样式
          .list {
            margin-top: 15px;
            li {
              line-height: 2em;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              cursor: pointer;
            }
          }
        }
        .plate:first-child {
          width: 63%;
          .list {
            li {
              width: 40%;
            }
          }
        }
      }
    }
  }
  .list .content {
    font-size: 12px;
    background-color: #ecf6f2;
    min-height: 500px;
    .wrapper {
      .header {
        color: #528c38;
        font-size: 34px;
        padding: 10px;
      }
      .artListArea {
        background-color: white;
        min-height: 300px;
        .artList {
          padding: 10px;
          border-bottom: 1px solid gainsboro;
          display: flex;
          cursor: pointer;
          .logo {
            flex: 1;
            img {
              width: 200px;
            }
          }
          .detailMsg {
            flex: 2;
            line-height: 3em;
          }
        }
        .page {
          text-align: center;
          padding: 1em;
        }
      }
      .noData {
        background-color: white;
        height: 200px;
        text-align: center;
        font-size: 30px;
        color: red;
      }
    }
  }
  .article .container {
    .content {
      .wrapper {
        background-color: rgba(255, 255, 255, 0.61);
      }
    }
  }
  .footer {
    border-top: 1px solid rgb(50, 74, 154);
    color: black;
    height: 200px;
    // background-color: #426ab3;
    .wrapper {
      .footer_top {
        display: flex;
        justify-content: space-between;
        .donghuan,
        .liushi,
        .liudong,
        .qita {
          margin-top: 2.5%;
        }
      }
      .footer-bottom {
        display: flex;
        justify-content: center;
        margin-top: 2%;
      }
    }
  }
  .articleWrapper {
    width: 90%;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.61);
  }
  .articleAitle {
    font-weight: 900;
    font-size: 25px;
    display: flex;
    justify-content: center;
  }
  .articleDetailMsg {
    display: flex;
    justify-content: center;
    span {
      margin: 20px;
    }
  }
}
</style>
